﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ctrImageSlider.ascx.cs"
    Inherits="TCHSHue.Modules.IndexControl.Slider.ctrImageSlider" %>
<link href="../../../Style/CSS/slideshow.css" rel="stylesheet" type="text/css" />
<div id="bigPic">
    <asp:Repeater ID="rptQuangCao" runat="server">
        <ItemTemplate>
            <a href="<%# Eval("ImageUrl") %>">
                <img src="<%# Eval("ImageUrl") %>" alt="<%# Eval("ImageUrl") %>" /></a>
        </ItemTemplate>
    </asp:Repeater>
</div>
<script type="text/javascript">
    var currentImage;
    var currentIndex = -1;
    var interval;
    function showImage(index) {
        if (index < $('#bigPic img').length) {
            var indexImage = $('#bigPic img')[index];
            if (currentImage) {
                if (currentImage != indexImage) {
                    $(currentImage).css('z-index', 2);
                    clearTimeout(myTimer);
                    $(currentImage).fadeOut(250, function () {
                        myTimer = setTimeout("showNext()", 3000);
                        $(this).css({ 'display': 'none', 'z-index': 1 });
                    });
                }
            }
            $(indexImage).css({ 'display': 'block', 'opacity': 1 });
            currentImage = indexImage;
            currentIndex = index;
        }
    }

    function showNext() {
        var len = $('#bigPic img').length;
        var next = currentIndex < (len - 1) ? currentIndex + 1 : 0;
        showImage(next);
    }

    var myTimer;

    $(document).ready(function () {
        myTimer = setTimeout("showNext()", 3000);
        showNext(); //loads first image
    });
</script>
